<template>
	<view>
		<view class="form-wrapper">
			<view class="form-item">
				<text class="title">姓名:</text>
				<input type="text" value="" placeholder="请输入姓名" v-model="name" />
			</view>
			<view class="form-item">
				<text class="title">手机号码:</text>
				<input type="number" maxlength="11" value="" placeholder="请输入手机号码" v-model="mobile" />
			</view>
			<view class="form-item">
				<picker mode=multiSelector :range="value_array" :value="picker_key_array" @columnchange="columnChange" @change="pickerConfirm()">
					<view>
						<text class="title">选择位置:</text>
						<text>{{!check_value_array[0] ? '点击选择位置' : check_value_array[0] + '，' + check_value_array[1] + '，' + check_value_array[2]}}</text>
					</view>
				</picker>

			</view>
			<view class="form-item">
				<text class="title">详细地址:</text>
				<input type="text" value="" placeholder="请输入详细地址" v-model="addr_info" />
			</view>

			<view class="form-item">
				<text class="title">设为默认地址</text>
				<checkbox class="round red" @click="is_default=!is_default" :checked="is_default" />
			</view>
			<button type="primary" @click="submit" class="submit">确定</button>
		</view>

	</view>
</template>
<script>
	import Region from '@/utils/region.json'
	export default {
		data() {
			return {
				picker_key_array: [],
				value_array: [],
				key_array: [0, 0],
				check_key_array: [],
				check_value_array: [],


				address_id: '',
				name: '',
				mobile: '',
				addr_info: '',
				is_default: false,
			}
		},
		onLoad(option) {
			this.address_id = option.id;
		},
		mounted() {
			this.initPicker()
			if (this.address_id) {
				this.getData();
			}
		},
		methods: {
			getData: function() {
				this.$api.getAddressInfo({
						id: this.address_id
					})
					.then(res => {
						console.log(res);
						this.name = res.data.name;
						this.mobile = res.data.mobile;
						this.is_default = res.data.is_def == 1;
						this.addr_info = res.data.address;
						this.check_key_array = [
							res.data.area_id.toString().substr(0, 2) + '0000',
							res.data.area_id.toString().substr(0, 4) + '00',
							res.data.area_id.toString()
						]
						console.log(this.check_key_array);
						this.check_value_array = [
							Region['0'][this.check_key_array[0]],
							Region['0,' + this.check_key_array[0]][this.check_key_array[1]],
							Region['0,' + this.check_key_array[0] + ',' + this.check_key_array[1]][this.check_key_array[2]],
						]
						console.log(this.check_value_array);
					})
					.catch(err => {

					})
			},
			initPicker: function() {
				let value_array = [
					[],
					[],
					[]
				];
				let key_array = [
					[],
					[],
					[]
				];
				let picker_key_array = [];
				let value_item = {};

				value_item = Region['0'];
				for (let v in value_item) {
					key_array[0].push(v)
					value_array[0].push(value_item[v])
				}

				value_item = Region['0,' + key_array[0][0]];
				for (let v in value_item) {
					key_array[1].push(v)
					value_array[1].push(value_item[v])
				}

				value_item = Region['0,' + key_array[0][0] + ',' + key_array[1][0]];
				for (let v in value_item) {
					key_array[2].push(v)
					value_array[2].push(value_item[v])
				}
				picker_key_array = [0, 0, 0]

				this.value_array = value_array;
				this.key_array = key_array;
				this.picker_key_array = picker_key_array;
			},
			columnChange: function(val) {
				let value_array = this.value_array;
				let key_array = this.key_array;
				let picker_key_array = this.picker_key_array;
				let value_item = {};

				// value_item = Region['0'];
				// for (let v in value_item) {
				// 	key_array[0].push(v)
				// 	value_array[0].push(value_item[v])
				// }
				picker_key_array[val.target.column] = val.target.value;


				if (val.target.column == 0) {
					value_item = Region['0,' + key_array[0][picker_key_array[0]]];
					key_array[1] = []
					value_array[1] = []
					for (let v in value_item) {
						key_array[1].push(v)
						value_array[1].push(value_item[v])
					}

					picker_key_array[1] = 0;
					value_item = Region['0,' + key_array[0][picker_key_array[0]] + ',' + key_array[1][picker_key_array[1]]];
					key_array[2] = []
					value_array[2] = []
					for (let v in value_item) {
						key_array[2].push(v)
						value_array[2].push(value_item[v])
					}

					picker_key_array[2] = 0;
				}

				if (val.target.column == 1) {
					picker_key_array[1] = val.target.value;
					value_item = Region['0,' + key_array[0][picker_key_array[0]] + ',' + key_array[1][picker_key_array[1]]];
					key_array[2] = []
					value_array[2] = []
					for (let v in value_item) {
						key_array[2].push(v)
						value_array[2].push(value_item[v])
					}
					picker_key_array[2] = 0;
				}
				this.$set(picker_key_array, 0, picker_key_array[0])
			},
			pickerConfirm: function() {
				this.check_key_array = [
					this.key_array[0][this.picker_key_array[0]],
					this.key_array[1][this.picker_key_array[1]],
					this.key_array[2][this.picker_key_array[2]]
				]
				this.check_value_array = [
					this.value_array[0][this.picker_key_array[0]],
					this.value_array[1][this.picker_key_array[1]],
					this.value_array[2][this.picker_key_array[2]]
				]
				// console.log(value_array[0][picker_key_array[0]],value_array[1][picker_key_array[1]],value_array[2][picker_key_array[2]]);
				// console.log(this.check_key_array);
			},
			submit: function() {
				if (this.name == '') {
					this.$db._ShowToast('请输入姓名')
					return false
				}
				if (this.mobile.length != 11) {
					this.$db._ShowToast('请输入正确的手机号码')
					return false
				}
				if (!this.check_value_array[0]) {
					this.$db._ShowToast('请选择地址')
					return false
				}
				if (this.addr_info == '') {
					this.$db._ShowToast('请输入详细地址')
					return false
				}
				// 发送请求
				if (!this.address_id) {
					// 新增地址
					this.$api.addAddr({
							name: this.name,
							mobile: this.mobile,
							area_id: this.check_key_array[2],
							address: this.addr_info,
							is_def: this.is_default ? 1 : 2
						})
						.then((res) => {
							console.log(res);
							if (res.status) {
								this.$db._ShowToast(res.msg, () => {
									this.$db._GoBack();
								})
							} else {
								this.$db._ShowToast(res.msg)
							}
						})
						.catch((err) => {})
				} else {
					// 编辑地址
					this.$api.editAddr({
						id: this.address_id,
						name: this.name,
						mobile: this.mobile,
						area_id: this.check_key_array[2],
						address: this.addr_info,
						is_def: this.is_default ? 1 : 2
					})
						.then((res) => {
							console.log(res);
							if (res.status) {
								this.$db._ShowToast(res.msg, () => {
									this.$db._GoBack();
								})
							} else {
								this.$db._ShowToast(res.msg)
							}
						})
						.catch((err) => {
							console.log(err);
						})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: white;
	}

	.form-wrapper {

		// background: white;
		.form-item {
			margin: 0 26rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(237, 237, 237, 1);

			.title {
				margin-right: 40rpx;
				font-size: 26rpx;
				font-weight: 700;
				line-height: 42rpx;
				color: rgba(0, 0, 0, 1);
			}

			input {
				font-size: 26rpx;
				font-weight: 400;
				line-height: 42rpx;
				color: rgba(0, 0, 0, 1);
				width: 500rpx;
			}

			checkbox {
				margin-left: auto;
				transform: scale(0.7);
			}
		}

		button {
			margin: 80rpx auto;
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 40rpx;
			background: #DFBB50;
		}
	}
</style>
